SVG 파일을 React 컴포넌트로 변환

개요

• storybook에서 svg 파일을 다루는 과정에서 next.js에서 발생한 오류를 확인하고 이에 대한 내용을 기록함

오류 발생, prerendering 오류

결론

• next.config.js 파일에서 svg 파일에 대한 webpack 설정을 통해 해결할 수 있었음
• 이외에도 다음과 같이 다양한 설정을 할 수 있음

트러블 슈팅

• svg 파일을 import로 불러와 Icom 컴포넌트를 만든 뒤, 최상단 페이지(/)에서 불러오면 하단에 나와있는 것처럼 해당 페이지(/)에서 prerendering이 실패하게 됨
• 이는 svg 파일이 React 컴포넌트로 변환되지 않은 상태에서 build 했기 때문인데 이를 위해서는 @svgr/webpack 등의 도구를 통해 컴포넌트로 변환시켜주는 작업이 필요
• 이에 대한 설정은 next.config.js에서 가능하며 자세한 내용은 다음에서 확인이 가능